<template>
  <mu-container style="padding: 0 0">
    <mu-appbar color="primary">
      缴费信息填写
    </mu-appbar>
    <mu-form ref="form" :model="form" style="padding-top: 40px;padding-left: 9px;padding-right: 9px" label-position="left">
      <mu-form-item prop="schoolId" label="学校" :rules="notNullRules" help-text="请先选择学校">
        <mu-select v-model="form.school.id" @change="changeSchool">
          <mu-option v-for="item in schoolOptions" :key="item.id" :label="item.name + ''" :value="item.id" />
        </mu-select>
      </mu-form-item>
      <mu-form-item prop="gradeId" label="年级" :rules="notNullRules">
        <mu-select v-model="form.grade.id" @change="changeGrade">
          <mu-option v-for="item in gradeOptions" :key="item.id" :label="item.name + ''" :value="item.id" />
        </mu-select>
      </mu-form-item>
      <mu-form-item prop="classId" label="班级" :rules="notNullRules">
        <mu-select v-model="form.clazz.id" @change="changeClass">
          <mu-option v-for="item in classOptions" :key="item.id" :label="item.name + ''" :value="item.id" />
        </mu-select>
      </mu-form-item>
      <mu-form-item prop="name" label="姓名" :rules="notNullRules">
        <mu-text-field v-model="form.name" />
      </mu-form-item>
    </mu-form>
    <div style="display: flex;align-content: center;justify-content: center;padding: 0 0">
      <mu-button color="primary"
                 full-width
                 :disabled="loading"
                 style="position: fixed; bottom:0;"
                 @click="submit">
        提交
      </mu-button>
    </div>
  </mu-container>
</template>

<script>
import crudForm from '@/api/mobile/form'
import crudSchool from '@/api/pay/school'
import crudGrade from '@/api/pay/grade'
import crudClass from '@/api/pay/class'
import { GetSignature } from '@/utils/common'
import wx from 'weixin-js-sdk'

export default {
  data() {
    return {
      pickerValue: '',
      schoolOptions: [],
      gradeOptions: [],
      classOptions: [],
      loading:false,
      form: {
        school: { id: null },
        schoolId: '',
        grade: { id: null },
        gradeId: '',
        clazz: { id: null },
        classId: '',
        name: '',
        code: '',
        state: '',
        openId: '',
        totalFee: ''
      },
      notNullRules: [
        { validate: (val) => !!val || val === 0, message: '不能为空' }
      ],
      tradeNo: null
    }
  },
  mounted() {
    const search = window.location.search
    this.form.code = search.substring(search.indexOf('=') + 1, search.indexOf('&'))
    this.form.state = search.substring(search.lastIndexOf('=') + 1)
    crudSchool.query().then(res => {
      this.schoolOptions = res.content
    })
  },
  methods: {
    submit() {
      this.$refs.form.validate().then((result) => {
        if (result) {
          this.loading = true
          GetSignature(() => {
            crudForm.sign(this.form.code,this.form.state).then(res => {
              this.form.openId = res.openId
              this.form.totalFee = res.totalFee
              const form = this.form
              wx.chooseWXPay({
                // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。
                // 但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                timestamp: res.timeStamp,
                nonceStr: res.nonceStr,
                package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: res.paySign, // 支付签名
                success: function(inRes) {
                  // 支付成功后的回调函数
                  crudForm.add(form)
                  /*crudForm.queryOrder(res.tradeNo).then(formRes => {
                    if (formRes.tradeState === 'SUCCESS') {
                    }
                  })*/
                },
                fail: function(res) {
                  alert(res.returnMsg)
                  wx.closeWindow()
                },
                complete: function(res) {
                  console.log(res, 'complete')
                  wx.closeWindow()
                }
              })
            })
          }).finally(() => this.loading = false)
        }
      })
    },
    /* submit() {
      this.$refs.form.validate().then((result) => {
        if (result) {
          crudForm.add(this.form).then(data => {
            console.log(data)
          })
        }
      })
    },*/
    clear() {
      this.$refs.form.clear()
      this.form = {
        school: { id: null },
        schoolId: '',
        grade: { id: null },
        gradeId: '',
        class: { id: null },
        classId: '',
        name: '',
        code: ''
      }
    },
    changeSchool(val) {
      this.form.schoolId = val
      crudGrade.query(val).then(res => {
        this.gradeOptions = res.content
        this.form.grade.id = null
      })
    },
    changeGrade(val) {
      this.form.gradeId = val
      crudClass.query(val).then(res => {
        this.classOptions = res.content
        this.form.clazz.id = null
      })
    },
    changeClass(val) {
      this.form.classId = val
    }
  }
}
</script>

<style scoped>

</style>
